<template>
	<div>
		<div class="outDiv">
			<go-back aa='../teachers/teaindex'></go-back>
			<scroller style='top: 0.88rem;'>
				<div>
					<div class="main">
						<div class="titleImage">
							<span>选课选科</span>
						</div>
						<div class="introduce">
							<p>新高考背景下，每个学生将面临一次选课选科的决策，高中时期的选课选科也将直接决定以后的专业和职业方向。为了选择符合自己的科目组合，重点考虑三个方面：专业方向、优势学科和高校限科要求。</p>
							<p>本系统融合生涯规划系统帮助同学选择适合自己的专业、优势学科自评分析确定自己的科目强弱、内置高校的限科要求智能筛选科目，为同学们选课选科及学校走班教学提供重要的参考依据。</p>
						</div>
						<div class="mainStep">
							<p class="stepTitle">本流程主要分为以下三步：</p>
							<div class="stepBoxWrap flex-h">
								<div class="di1">
									<img class="img1" src="~/static/images/icon_01.png" alt="">
									<b class="bb1">添加和提交</b>
									<b>意向专业类</b>
								</div>
								<div class="di2 flex1">
									<span class="sp1"> 
										<img class="spp1 imgIcon" src="~/static/images/select courses_pic_arrow.png" alt="">
										<img class="spp imgIcon" src="~/static/images/icon_02.png" alt="">
										<img class="spp1 imgIcon" src="~/static/images/select courses_pic_arrow.png" alt="">
									</span>
									<b class="bb1">提交优势科目</b>
									<b>强弱排序</b>
								</div>
								<div class="di1">
									<img class="img1" src="~/static/images/icon_03.png" alt="">
									<b class="bb1">查看最佳</b>
									<b>选课结果</b>
								</div>
							</div>
						</div>

						<div class="btn">
							<button class="quickStart" @click="goes">立即开始</button>
							<button class="watchRecord" @click="commonJs.gosto('planRecord')">查看最佳选课方案记录</button>
						</div>
					</div>
					<div style="width: 100%; height: 10vh;"></div>
				</div>
			</scroller>
		</div>
	</div>
</template>

<script>
	import ls from 'store2'
	import goBack from '~/components/goBack'
	export default {
		components: {
			goBack
			
		},
		data() {
			return {
				loginer:false
			}
		},
		created(){
			this.commonJs.gologins();
			if(ls.get('tokens')){
				this.loginer=true
			}
		},
		mounted: function() {
			if(this.commonJs.isTerminal()=='isAndroid'){
				if (window.history && window.history.pushState) {
				history.pushState(null, null, document.URL);
				window.addEventListener('popstate', this.fun, false); //false阻止默认事件 
			}
			}
		},
		destroyed() {
			// this.commonJs.xahui('../teachers/teaindex')
			window.removeEventListener('popstate', this.fun, false);
		},
		methods: {
					fun() {
				this.$router.replace({
					path: '../teachers/teaindex'
			
				})
			
			},
			goes(){
				
				if(this.loginer){
					this.commonJs.gosto('addIntention')
				}else{
					ls.set('preUrl','../chooseCourse/selectCouerse')					
					this.commonJs.gosto('../teachers/tealogin')
				}
				
			},
			 
			goto(routerName, queryData) {
				this.$router.push({
					path: routerName,
					query: {
						type: queryData
					}
				});
			},
			goback() {
				// 返回上一步
				window.history.back()
			},
		}
	}
</script>

<style lang="less" scoped>
	.outDiv {
		width: 100%;
		height: 100vh;
		background: #FFF url('~/static/images/chooseCourse_index_background.png') no-repeat;
		background-size: 100% 100%;

		.header {
			width: 100%;
			height: 0.88rem;
			text-align: right;
			padding: 0 0.3rem;
			background: transparent;
			font-size: 0.3rem;
			letter-spacing: 0.05rem;
			color: #222;
			font-weight: bold;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.imgIcon {
				width: 0.4rem;
				height: 0.4rem;
			}
		}

		.main {
			padding: 0 0.1rem;

			.titleImage {
				width: 100%;
				height: 2.6rem;
				background: url('~/static/images/select_courses_pic_banner.png') no-repeat;
				background-size: 100% 100%;
				border-radius: 0.2rem;
				margin-bottom: 0.3rem;
				padding-top: 0.88rem;
				padding-left: 0.92rem;

				span {
					font-size: 0.44rem;
					color: #FFF;
					letter-spacing: 0.05rem;
				}
			}

			.introduce {
				color: #666;
				letter-spacing: 0.02rem;
				font-size: 0.26rem;
				font-weight: 500;
				padding: 0 0.5rem;

				p {
					line-height: 0.39rem;
					margin-bottom: 0.5rem;
				}
			}

			.mainStep {
				padding: 0 0.5rem;
				margin-bottom: 0.8rem;
				color: #222;
				font-size: 0.26rem;
				font-weight: bold;

				.stepTitle {
					margin-bottom: 0.49rem;
				}

				//         .stepIcon {
				//           display: flex;
				//           justify-content: space-between;
				//           align-items: center;
				//           margin-bottom: 0.43rem;
				// 					padding: 0 0.26rem;
				// 					box-sizing: border-box;
				// //           svg {
				// //             width: 0.96rem;
				// //             height: 0.96rem;
				// //           }
				// 					.imgIcon{
				// 						width: 0.96rem;
				// 						height: 0.96rem;
				// 					}
				// 					.spp1{
				// 						height: 0.12rem;
				// 						width: auto;
				// 					}
				//         }
				.stepBoxWrap {
					.di1 {
					
						.img1 {
							display: block;
							width: 0.96rem;
							height: 0.96rem;
							margin: 0 auto;
						}

						b {
							text-align: center;
							display: block;
								font-size:0.26rem;
							font-family:Helvetica;
							color:rgba(34,34,34,1);
												
							display: block;
						}
					}
					.di2{
						height: auto;
						.sp1{
							height: 0.96rem;
							display: block;
							overflow: hidden;
							text-align: center;
							.spp{
								width: 0.96rem;
								height: 0.96rem;
							}
							.spp1{
								height: 0.12rem;
								width: auto;
								margin-bottom: 0.42rem;
							}
						}
						b{
							text-align: center;
							font-size:0.26rem;
							font-family:Helvetica;
							color:rgba(34,34,34,1);
					
							display: block;
						}
					} 
					.bb1{
						margin-top: 0.44rem;
					}
				}

				.stepDescribe {
					display: flex;
					justify-content: space-between;
					align-items: center;

					span {
						text-align: center;
						font-weight: bold;
					}
				}
			}

			.btn {
				display: flex;
				justify-content: space-between;
				padding: 0 0.5rem;

				button {
					width: 3rem;
					height: 0.88rem;
					border-radius: 0.1rem;
					border: none;
					outline: none;
					font-weight: 600;
				}

				.quickStart {
					font-size: 0.34rem;
					background: linear-gradient(45deg, #67BD19 0%, #B5E861 100%);
					color: #FFF;
				}

				.watchRecord {
					// background: #FFF;
					background: transparent;
					border: 0.02rem solid #EEE;
					color: #999;
					font-size: 0.26rem;
				}
			}
		}
	}
</style>
